<!--
 * @FilePath     : /study_code/layui/13-2-17.html
 * @Description  : toolbar 自定义头部工具栏
 * @Date         : 2025-04-07 17:14:25
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-08 14:28:01
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <table id="demo" lay-filter="test"></table>

    <script src="/layui/dist/layui.js"></script>
    <script src="/layui/table/common.js"></script>
    <script>
      var table = layui.table

      table.render({
        elem: '#demo',
        cols: cols,
        data: tableData,

        title: '用户表',

        /**
         * @key toolbar
         * @brief: 开启表格头部工具栏区域
         * @value {string|boolean} 配置对象
         * -------------------------------
         * {string}
         * （1）支持 tmpl 语法；
         * （-1）指向自定义工具栏模板选择器
         * （！将工具栏放在一个容器中，容器会被放到表头工具栏位置左侧；且右侧默认工具栏会显示（渲染见 ./images/toolbar/1.png））
         * 例如：'#toolbarDemo'
         * （-2）直接传入工具栏模板字符
         * （！'工具栏模板字符串'会被放到表头工具栏位置左侧；且右侧默认工具栏会显示（渲染见 ./images/toolbar/2.png））
         * 例如：'<div>我是工具栏</div>'
         * （2）特殊的 'default' 字符串；
         * 让工具栏左侧显示默认的内置模板 （添加、修改、删除图标）
         * ------------------------------
         * {boolean}
         * true 仅开启工具栏，不显示左侧模板；
         * （渲染见 ./images/toolbar/2.png））
         */
        // toolbar: '#toolbarDemo',
        // toolbar: '<div>我是工具栏</div>',
        toolbar: true,
        // toolbar: 'default',
      })
    </script>
  </body>
</html>